<template>
	<div>

		<!-- 计算属性和函数的区别 -->

		姓氏 <input type="text" v-model="xing"> <br>
		名字 <input type="text" v-model="ming"> <br>
		全名 <input type="text"> <br>
		{{ xing[0].toUpperCase() + xing.slice(1) + ming }} <br>
		不能改变的 {{ c }} <br>
		<!-- 能改变的 {{ quan }} -->
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		函数的 {{ getQuan() }}
		<br>

		{{riqi}}
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

let xing = ref("wang")
let ming = ref("")
// 计算属性,根据已有的属性的变化,形成一个新的属性 
let c = xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
// 函数也可以实现响应式,没有缓存,调用一次,执行一次函数
let getQuan = function () {
	console.log(1111);
	return xing.value[0].toUpperCase() + xing.value.slice(1) + ming.value
}
// 里边数据是响应式,数据还需要变化
let riqi = computed(() => {
  let dd = new Date()
	console.log(dd.toLocaleTimeString());
	return dd.toLocaleTimeString()
})







</script>

<style  scoped></style>